<template>
  <div>
    <h3 class="title" @click="getWarningList">{{ $t("warnings.title") }}</h3>
    <div class="search">
      <el-input
        class="input-with-select"
        :placeholder="$t('warnings.search.placeholder')"
        v-model="queryInfo.query_text"
      >
        <!-- <el-select
          v-model="select"
          slot="prepend"
          placeholder="搜索条件"
          style="width: 140px"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select> -->

        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" @click="searchWarnings">{{
        $t("warnings.search.searchBtn")
      }}</el-button>
      <el-button type="info" plain @click="resetSearch">{{
        $t("warnings.search.resetBtn")
      }}</el-button>
    </div>
    <!-- <el-tabs v-model="queryInfo.reptile_type" @tab-click="handleClick">
      <el-tab-pane label="scrapyd" name="1"></el-tab-pane>
      <el-tab-pane label="python" name="2"></el-tab-pane>
      <el-tab-pane label="other" name="3"></el-tab-pane>
    </el-tabs> -->
    <el-table
      :data="warningList"
      border
      stripe
      :row-style="{ height: '55px' }"
      style="width: 100%; min-height: 600px"
    >
      <el-table-column
        type="index"
        :label="$t('warnings.table.index')"
        width="65"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="msg"
        :label="$t('warnings.table.descript')"
      >
      </el-table-column>
      <!-- <el-table-column label="是否处理">
        <template slot-scope="scope">
          <el-button>是否处理</el-button>
        </template>
      </el-table-column> -->

      <el-table-column
        width="200"
        show-overflow-tooltip
        prop="client_name"
        label="主机名"
      >
      </el-table-column>
      <el-table-column
        width="250"
        show-overflow-tooltip
        prop="datetime"
        :label="$t('warnings.table.time')"
      >
      </el-table-column>
      <!-- <el-table-column :label="$t('warnings.table.detail')">
        <template slot-scope="{ row }">
          <el-input
            :placeholder="$t('warnings.table.detail_input')"
            v-model="row.processing_details"
          ></el-input>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-size="queryInfo.pagesize"
        layout="total,prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
// import DutyRecordsDialog from "../../../components/DutyRecordsDialog.vue";
export default {
  // components: { DutyRecordsDialog },
  data() {
    return {
      warningList: [],
      total: 0,
      // 查询参数
      queryInfo: {
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        pagesize: 10,
        // 查询文字
        query_text: "",
        reptile_type: "1",
      },
    };
  },
  created() {
    this.getWarningList();
  },
  methods: {
    handleClick() {
      this.getWarningList();
    },
    // 分页功能
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.page = val;
      this.getWarningList();
    },
    // 获取报警列表
    getWarningList() {
      this.$http
        .get("/business/warning/list", { params: this.queryInfo })
        .then((res) => {
          console.log(res.data);
          this.warningList = res.data.data;
          this.total = res.data.total;
        });
    },
    // 搜索
    searchWarnings() {
      this.getWarningList();
    },
    // 重置搜索
    resetSearch() {
      this.queryInfo.query_text = "";
      this.getWarningList();
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin: 10px 0;
  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
.title {
  color: #606266;
}
.footer {
  display: flex;
  padding-top: 12px;
  .pagination {
    margin-left: 20px;
  }
}
</style>